<template>
  <div class="task_utils">
    <span class="task_utils_title">任务列表</span>
    <div class="task_utils__center">
      <el-button :class="[{ active: align == 'justify' }]" @click="align = 'justify'">
        <icon-ph-text-align-justify />
      </el-button>
      <el-button :class="[{ active: align == 'top' }]" @click="align = 'top'">
        <icon-ph-align-top />
      </el-button>
      <el-button :class="[{ active: align == 'center' }]" @click="align = 'center'">
        <icon-ph-align-center-horizontal />
      </el-button>
    </div>
    <el-button @click="Funnel = true">
      <iconPhFunnel />
    </el-button>
  </div>
  <el-drawer v-model="Funnel" title="I am the title" :with-header="false" append-to-body>
    <span>Hi there!</span>
  </el-drawer>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue';

const align = inject("align")


const Funnel = ref(false)


</script>

<style scoped lang="scss">
.task_utils {
  display: flex;
  padding: 20px;
  align-items: center;
  justify-content: space-between;

  :deep(.el-button) {
    width: 40px;
    height: 40px;
    padding: 0;
  }

  &_title {
    color: #0A1629;
    font-size: 22px;
  }

  .active {
    color: #3F8CFF;
  }
}
</style>